<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>班级的增删改查</title>
</head>

<body>

  <input type="text" id="bjcx" placeholder="班级查询">
  <button id="cx">查询</button>
  <button id="cz">重置</button>
  <button id="zj">增加</button>

  <!-- 增加部分 -->
  <dialog id="tczs">
    <input type="text" id="bjmc" placeholder="班级名称">
    <hr>
    <input type="text" id="bjjs" placeholder="班级介绍">
    <hr>
    <button id="tj">添加</button>
    <form method="dialog">
      <button>关闭</button>
    </form>
  </dialog>

  <!-- 修改部分 -->
  <dialog id="tczs2">
    <input type="text" id="bjmc2" placeholder="班级名称">
    <hr>
    <input type="text" id="bjjs2" placeholder="班级介绍">
    <hr>
    <button id="xg">修改</button>
    <form method="dialog">
      <button>关闭</button>
    </form>
  </dialog>

  <table style="width: 100%;">
    <thead>
      <tr>
        <th>班级编号</th>
        <th>班级名称</th>
        <th>班级描述</th>
        <th>信息最后修改时间</th>
        <th>操作</th>
      </tr>

    <tbody id="ae">
      <!-- <tr>
        <td></td>
      </tr> -->
    </tbody>
    </thead>
  </table>

  <!-- 分页部分 -->
  <nav>
    <a href="javascript:void(0)">第一页</a>
    <a href="javascript:void(0)">上一页</a>
    <span></span>
    <a href="javascript:void(0)">下一页</a>
    <a href="javascript:void(0)">最后一页</a>
  </nav>



  <script src="./js/banji1.js" type="module"></script>
</body>

</html>